Html and css for simple banner layout
As many of you know, html and css still hasn’t figured out how to make layout simple and easy. No wonder banners are images. Trying to do a banner that isn’t an image is like beating your head against the wall.
Here is a very basic and very common use case:
- Banner should not be a full-width image.
- There is html content on the left that is left justified, html content in the center that is center justified, html content on the right that is right justified.
- If the screen shrinks, the content in the middle and the right should not wrap.
Failure 1 – The intuitive approach
<div id="frame-banner" style="min-width: 800px"> <div style="float: left; min-width: 200px">Left Content</div> <div style="float: center; min-width: 400px">Middle content</div></div> <div style="float: right;min-width: 200px">right content</div> </div>
Well, even though it seems intuitive to have something float in the center, float: center doesn’t exist, so that just doesn’t work. Would have been cool. I of course, knew float: center didn’t exist.
Failure 1 – Simple divs
So let’s actually spend some time trying to make this work. Here is what I actually thought should work. Unfortunately, it doesn’t. Some weird formatting happens.
<!DOCTYPE html>
<html>
<head>
<title>html fails at layout</title>
</head>
<body>
<div style="width: 100%;height: 100px;background: gray;margin: 0;padding: 0;">
<div style="width: 800px;margin: 0 auto;height: 100%;">
<div style="width: 25%;height: 90%;display: inline-block;background: lightblue;"><div style="background: blue;color: white;margin: 10px;height: 80%;">left<img alt="Image Alt" style="width: 32px; height: 32px;" /></div></div><!-- no space
--><div style="width: 50%;height: 90%;display: inline-block;background: orange;text-align: center;"><div style="width: 25%;margin: 10px auto;background: blue;color: white;height: 80%;">middle</div></div><!-- no space
--><div style="width: 25%;height: 90%;display: inline-block;background: lightblue;text-align: right;"><div style="background: blue;color: white;margin: 10px;height: 80%;text-align: right;">right</div></div>
</div>
</div>
</body>
</html>
I added some hacks to eliminate spacing that shouldn’t exist, but does.
That looks so good. You think that is going to work right?
Well, let’s add an image and see how that works.
<div style="width: 100%;height: 100px;background: gray;margin: 0;padding: 0;">
<div style="width: 800px;margin: 0 auto;height: 100%;">
<div style="width: 25%;height: 90%;display: inline-block;background: lightblue;"><div style="background: blue;color: white;margin: 10px;height: 80%;">left<img alt="Image Alt" style="width: 32px; height: 32px;" /></div></div><!-- no space
--><div style="width: 50%;height: 90%;display: inline-block;background: orange;text-align: center;"><div style="width: 25%;margin: 10px auto;background: blue;color: white;height: 80%;">middle</div></div><!-- no space
--><div style="width: 25%;height: 90%;display: inline-block;background: lightblue;text-align: right;"><div style="background: blue;color: white;margin: 10px;height: 80%;text-align: right;">right<img alt="rss" src="https://www.rhyous.com/wp-content/plugins/social-media-widget/images/default/32/rss.png" /></div></div>
</div>
</div>
See, as soon as you try to use this layout by adding an image, the layout breaks. Do they do any layout testing in browsers? I’ve heard rumors that the W3C doesn’t believe in supporting layout.
Epic fail. Come on w3C people as well as HTML and CSS developers. There is no excuse for this after twenty years.
Failure 2 – All floats
<!DOCTYPE html>
<html>
<head>
<title>html fails at layout</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width: 100%;height: 100px;background: gray;margin: 0;padding: 0;">
<div style="width: 800px;margin: 0 auto;height: 100%;">
<div style="width: 25%;height: 90%;float: left;background: lightblue;"><div style="background: blue;color: white;margin: 10px;height: 80%;float: left;">left</div></div>
<div style="width: 50%;height: 90%; background: orange;float:left;"><div style="margin: 10px;height: 80%;"><div style="width: 25%;background: blue;color: white;height: 100%;float: left; position: relative; right: -50%; margin: 0px auto;text-align: center;">middle</div></div></div>
<div style="width: 25%;height: 90%;float: right;background: lightblue;text-align: right;"><div style="background: blue;color: white;margin: 10px;height: 80%;text-align: right;float:right;">right</div></div>
</div>
</div>
</body>
</html>
This almost looks right, but wait. How do we actually get it centered? Notice it isn’t centered. It is right of center.
I can make it left of center, but I have to put the middle after the right and that is a hack:
But I can’t make it centered. This is not a solution.
Failure 3 – Middle doesn’t float
So what if just the middle element doesn’t float?
<!DOCTYPE html>
<html>
<head>
<title>html fails at layout</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width: 100%;height: 100px;background: gray;margin: 0;padding: 0;">
<div style="width: 800px;margin: 0 auto;height: 100%;">
<div style="width: 25%;height: 90%;float: left;background: lightblue;">
<div style="background: blue;color: white;margin: 10px;height: 80%;float: left;">left</div>
</div>
<div style="width: 50%;height: 90%; background: orange;margin: 0 auto;">
<div style="margin: 10px;height: 80%;">
<div style="width: 25%;background: blue;color: white;height: 100%; margin: 0px auto;text-align: center;">middle</div>
</div>
</div>
<div style="width: 25%;height: 90%;float: right;background: lightblue;text-align: right;">
<div style="background: blue;color: white;margin: 10px;height: 80%;text-align: right;float: right;">right</div>
</div>
</div>
</div>
</body>
</html>
That looks horrible.
Now I have two problems:
- The right side is down below my banner.
- The top margin of center is applying above the banner, not inside it.
Finally – Success with middle doesn’t float and extra div elements
Well, the final html looks horrible and the center ends up being wrapped in four divs.
To center, you use width: 99%; margin: 0 auto” where the width has to be less than 100%. How is that intuitive. It isn’t. It is horrible. Come on W3C, how hard would it be to add proper intuitive alignment to the html and css spec?
<!DOCTYPE html>
<html>
<head>
<title>html fails at layout</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width: 100%;height: 100px;background: gray;margin: 0;padding: 0px;">
<div style="width: 800px;margin: 0 auto;height: 100%;">
<div style="width: 25%;height: 90%;float: left;background: lightblue;">
<div style="background: blue;color: white;margin: 10px;height: 80%;float: left;">left</div>
</div>
<div style="width: 25%;height: 90%;float: right;background: lightblue;text-align: right;">
<div style="background: blue;color: white;margin: 10px;height: 80%;text-align: right;float: right;">Right</div>
</div>
<div style="width: 50%;margin: 0 auto;height: 80%; background: orange;padding-top:10px">
<div style="text-align:center;width: 90%; margin: 0 auto; background: blue;color: white; height: 80%;">Center</div>
</div>
</div>
</div>
</body>
</html>
The result is finally acceptable.
Let’s add some content to make sure:
Rant on html, css, and W3C
I get that you are trying to do new things with HTML5, but until you actually draw the common layouts, such as two column fixed, three column fixed, and two column liquid, and three column liquid, and actually define the spec to layout properly, it will never work.
Also, without over-wrapping div in div in div, you can’t make html work. That is why all the html and css for the examples on the web look so horrible, because they have to be to work around the terrible job done with html and css layouts.
Layout failures starting with the W3C provided specs are the primary reason why HTML is not the answer for business. I could have written a separate UI for a banner in every platform Android, iOS, Windows, Windows Phone, and Linux, all in less than the time it took me to hack around and figure out what needed to be done in html.
